<template>
	<uni-popup ref="popupRef" type="bottom" :background-color="backgroundColor">
		<view class="selector-popup" :style="{ backgroundColor: backgroundColor }">
			<!-- 头部 -->
			<view class="popup-header" >
				<text class="text">{{ headerText }}</text>
				<text class="text" @tap="closePopup">取消</text>
			</view>
			<!-- 选项列表 -->
			<view class="popup-content">
				<view 
					v-for="(option, index) in options" 
					:key="index" 
					class="option-item" 
					:class="{ active: currentValue === option.value }"   
					@tap="selectValue(option)"
				>
					<view> {{ option.preText || option.label }} </view>
					
					<image 
						v-if="option.imagePath" 
						class="popup-image" 
						:src="option.imagePath" 
						mode="widthFix" 
					/>
 
					<view v-if="option.endText">{{ option.endText }}</view>
				</view>
			</view>
		</view>
	</uni-popup>
</template>

<script>
import { ref } from 'vue';

export default {
	name: 'SelectorPopup',
	props: {
		options: {
			type: Array,
			required: true
		},
		currentValue: {
			type: [String, Number],
			default: ''
		},
		headerText: {
			type: String,
			default: '选择'
		},
		backgroundColor: {
			type: String,
			default: '#fff'
		}
	},
	setup(props, { emit }) {
		const popupRef = ref(null);

		// 打开弹窗
		const openPopup = () => {
			popupRef.value?.open();
		};

		// 关闭弹窗
		const closePopup = () => {
			popupRef.value?.close();
		};

		// 选择值并关闭弹窗
		const selectValue = (option) => {
			emit('select', option);
			closePopup();
		};

		return {
			popupRef,
			openPopup,
			closePopup,
			selectValue,
		};
	}
};
</script>

<style scoped>
/* 弹窗外层 */
.selector-popup {
    border-radius: 16rpx;
    overflow: hidden;
}

/* 头部样式 */
.popup-header {
    display: flex;
    justify-content: space-between;
    padding: 30rpx;
    border-bottom: 1px solid #eee;
}

.text {
    font-size: 32rpx;
    color: #333;
}

.text:last-child {
    color: #666;
}

/* 内容区域 */
.popup-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10rpx 10rpx;
    min-height: 50vh; 
    overflow-y: auto;
}

/* 选项样式 */
.option-item {
    width: 100%;
    height: 120rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28rpx;
    color: #333;
    border-bottom: 1px solid #eee;
}

/* 选中状态 */
.option-item.active {
    color: #3872FE;
}

/* 图片样式 */
.popup-image {
    width: 60px;
}
</style>
